<template>
	<el-container>
		<el-header>
			<el-input v-model="queryText" type="text" placeholder="请输入关键词搜索"
					  @keyup.enter.native="doSearch"
			          clearable @clear="cancelSearch">
				<template #append>
					<el-button @click="doSearch">
						<el-icon>
							<Search/>
						</el-icon>
					</el-button>
				</template>
			</el-input>
		</el-header>
		<el-main>
			<SimpleTable :columns="columns" :data="tableData" :pagination="page" :show-check-box="false"
						 :height="tableHeight"
						 :show-operation-column="true"
						 @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
						 table-size="small" table-width="100% !important">
				<template #table_operation="{scope}">
					<el-button @click="selectRecord(scope.row)">
						<el-icon>
							<Check/>
						</el-icon>
						选择
					</el-button>
				</template>
			</SimpleTable>
		</el-main>
	</el-container>
</template>

<script>
import {setColumnFormatter} from '@/utils/util'
import {refFieldQuery} from '@/api/crud'
import { externalEefFieldQuery } from "@/api/external";
export default {
	props: {
		entity: String,
		refField: String,
		extraFilter: String,  // 查询条件
		tableHeight: {
			type: String,
			default: '480px'
		},
        gDsv: Object,
	},
	name: "ReferenceSearchTable",
	data() {
		return {
			idField: null,
			nameField: null,
			queryText: '',
			columns: [],
			tableData: [],
			page: {
				pageNo: 1,
				limit: 10,
				sizes: [10, 20, 30],
				total: 0
			},
		}
	},

	mounted() {
		this.loadTableTable()
	},

	methods: {
		// 改变分页大小处理
		handleSizeChange(val) {
			this.page.limit = val
			this.loadTableTable()
		},

		// 翻页处理
		handleCurrentChange(val) {
			this.page.pageNo = val
			this.loadTableTable()
		},

		loadTableTable() {
            let paramStr, res;
            // 如果是外部表单
            if (this.gDsv?.isExternalForm) {
                paramStr = this.$route.query.externalId;
                this.refFieldQueryApi(externalEefFieldQuery, paramStr);
            } else {
                paramStr = this.entity;
                this.refFieldQueryApi(refFieldQuery, paramStr);
            }
        },

        refFieldQueryApi(cb, paramStr) {
            cb(
                paramStr,
                this.refField,
                this.page.pageNo,
                this.page.limit,
                this.queryText,
                this.extraFilter
            )
                .then((res) => {
                    if (res.error != null) {
                        this.$message({ message: res.error, type: "error" });
                    } else {
                        this.idField = res.data.idFieldName;
                        this.nameField = res.data.nameFieldName;
                        let columnList = res.data.columnList;
                        columnList.forEach((cl) => {
                            setColumnFormatter(cl);
                        });
                        this.columns = columnList;
                        this.tableData = res.data.dataList;
                        //console.log(this.tableData)
                        this.page.total = res.data.pagination.total;
                    }
                })
                .catch((res) => {
                    this.$message({ message: res.error, type: "error" });
                });
        },

		selectRecord(row) {
			this.$emit('recordSelected', {
				'id': row[this.idField],
				'label': row[this.nameField],
			}, row)
		},

		doSearch() {
			this.loadTableTable()
		},

		cancelSearch() {
			this.loadTableTable()
		}

	}
}
</script>

<style lang="scss" scoped>
:deep(.el-header) {
	padding: 0 12px;
}

:deep(.el-main) {
	padding: 6px;
}
</style>
